import React from 'react';
import PropTypes, { oneOfType } from 'prop-types';
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import { Icon, Names } from 'bee/components/Icon';
import { colors, sizes } from 'bee/themes';
import { noop, px2dp } from 'bee/utils';
import Radio from 'bee/components/Radio';

import ChooseBtn from './ChooseBtn';
import Notes from './Notes';
import Email from './Email';

const { white } = colors;
const { f1, f2, f3 } = sizes;

const Header = ({ title, close }) => (
  <View style={styles.headerView}>
    <Text style={styles.headerTitle}>{title}</Text>
    {/* <Text style={styles.headerIcon} onPress={close} /> */}
    <Icon name={Names.guanbi} onPress={close} size={sizes.f3} />
  </View>
);

Header.propTypes = {
  title: PropTypes.string.isRequired,
  close: PropTypes.func,
};

Header.defaultProps = {
  close: noop,
};

const InputWithBtn = ({ value, onChangeText, placeholder }) => (
  <View style={styles.inputView}>
    <TextInput
      placeholder={placeholder}
      underlineColorAndroid="transparent"
      value={value}
      onChangeText={onChangeText}
      style={styles.input}
      keyboardType="numeric"
    />
    <Text
      style={styles.inputIcon}
      onPress={() => {
        onChangeText('');
      }}
    />
  </View>
);

InputWithBtn.propTypes = {
  value: PropTypes.string,
  onChangeText: PropTypes.func,
  placeholder: PropTypes.string,
  clear: PropTypes.func.isRequired,
};

InputWithBtn.defaultProps = {
  value: '',
  placeholder: '',
  onChangeText: noop,
};

const Row = ({ label, children }) => (
  <View style={styles.rowView}>
    <Text style={styles.rowLabel}>{label}</Text>
    {children}
  </View>
);

Row.propTypes = {
  label: PropTypes.string.isRequired,
  children: PropTypes.element,
};

Row.defaultProps = {
  children: null,
};

const ExtendBox = ({ children }) => (
  <View style={styles.extendView}>{children}</View>
);

ExtendBox.propTypes = {
  children: oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element])
    .isRequired,
};

const Select = ({ value, onChangeText, placeholder, onPress }) => (
  <TouchableOpacity onPress={onPress}>
    <View style={styles.inputView}>
      <TextInput
        placeholder={placeholder}
        underlineColorAndroid="transparent"
        value={value}
        onChangeText={onChangeText}
        style={styles.input}
        keyboardType="numeric"
        editable={false}
      />
      <Text style={[styles.inputIcon, { backgroundColor: '#faa' }]} />
    </View>
  </TouchableOpacity>
);

Select.propTypes = {
  value: PropTypes.string,
  onChangeText: PropTypes.func,
  placeholder: PropTypes.string,
  onPress: PropTypes.func.isRequired,
};

Select.defaultProps = {
  value: '',
  placeholder: '',
  onChangeText: noop,
};

const Title = ({ title, children }) => (
  <View style={styles.titleView}>
    <View style={styles.row}>
      <View style={styles.titleBar} />
      <Text style={styles.titleText}>{title}</Text>
    </View>
    {children}
  </View>
);

Title.propTypes = {
  title: PropTypes.string.isRequired,
  children: oneOfType([
    PropTypes.arrayOf(PropTypes.element),
    PropTypes.element,
  ]),
};

Title.defaultProps = {
  children: null,
};

const Item = ({ title, children }) => (
  <View style={styles.itemView}>
    <Text style={styles.itemLabel}>{title}</Text>
    {children}
  </View>
);

Item.propTypes = {
  title: PropTypes.string.isRequired,
  children: PropTypes.element,
};

Item.defaultProps = {
  children: null,
};

const InsuranceItem = ({ isSelected, onPress, index, text }) => (
  <Text
    style={
      isSelected
        ? [styles.insuranceItem, { color: colors[1001] }]
        : styles.insuranceItem
    }
    onPress={() => onPress(index)}
  >
    {text}
  </Text>
);

InsuranceItem.propTypes = {
  isSelected: PropTypes.bool.isRequired,
  index: PropTypes.number.isRequired,
  onPress: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
};

const ImportBtn = ({ onPress, text }) => (
  <TouchableOpacity onPress={onPress}>
    <View style={styles.row}>
      <Text style={styles.importBtn}>{text}</Text>
      {/* <Icon size={px2dp(36)} /> */}
      <Icon color={colors['1001']} name={Names.gengduofuben} size={sizes.f1} />
    </View>
  </TouchableOpacity>
);

ImportBtn.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
};

const TotalView = ({ total }) => (
  <View style={styles.totalMoneyView}>
    <Text style={styles.totalText}>合计保费</Text>
    <Text>
      <Text style={styles.totalMoney}>{total}</Text>
      <Text style={styles.totalText}>元</Text>
    </Text>
  </View>
);

TotalView.propTypes = {
  total: PropTypes.number.isRequired,
};

const Input = ({ value, placeholder, onChangeText }) => (
  <TextInput
    value={value}
    underlineColorAndroid="transparent"
    onChangeText={onChangeText}
    placeholder={placeholder}
    style={styles.inputComponent}
    placeholderTextColor={colors[1102]}
  />
);

Input.propTypes = {
  value: PropTypes.string.isRequired,
  onChangeText: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
};

Input.defaultProps = {
  placeholder: '',
};

const RadioPicker = ({ value, index, onPress, isSelected }) => (
  <TouchableOpacity onPress={() => onPress(index)} style={styles.row}>
    <View style={{ marginRight: px2dp(10) }}>
      <Radio selected={isSelected} onPress={() => onPress(index)} />
    </View>
    <Text style={[styles.chooseText, { marginRight: px2dp(20) }]}>{value}</Text>
  </TouchableOpacity>
);

RadioPicker.propTypes = {
  value: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  index: PropTypes.number.isRequired,
  isSelected: PropTypes.bool.isRequired,
};

RadioPicker.defaultProps = {};

const ConfirmBtn = ({ onPress }) => (
  <TouchableOpacity onPress={onPress}>
    <Text style={styles.confirmBtn}>确定</Text>
  </TouchableOpacity>
);

ConfirmBtn.propTypes = {
  onPress: PropTypes.func.isRequired,
};

const styles = StyleSheet.create({
  headerView: {
    height: px2dp(80),
    backgroundColor: colors.white,
    borderColor: '#bfbfbf',
    borderWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: f2,
  },
  headerIcon: {
    width: px2dp(36),
    height: px2dp(36),
    backgroundColor: 'red',
    position: 'absolute',
    right: px2dp(60),
  },
  inputView: {
    borderColor: '#bfbfbf',
    borderWidth: StyleSheet.hairlineWidth,
    flexDirection: 'row',
    width: px2dp(220),
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  inputIcon: {
    width: px2dp(18),
    height: px2dp(18),
    backgroundColor: colors[1002],
  },
  input: {
    width: px2dp(190),
    height: px2dp(30),
    padding: 0,
    fontSize: px2dp(16),
  },
  rowView: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  rowLabel: {
    fontSize: f1,
    color: colors[1101],
    height: px2dp(60),
    textAlignVertical: 'center',
  },
  extendView: {
    backgroundColor: colors.white,
    marginTop: px2dp(10),
    marginBottom: px2dp(10),
    marginLeft: px2dp(20),
    marginRight: px2dp(20),
    paddingLeft: px2dp(40),
    paddingRight: px2dp(40),
    paddingTop: px2dp(30),
    paddingBottom: px2dp(30),
  },
  titleView: {
    height: px2dp(100),
    paddingLeft: px2dp(34),
    paddingRight: px2dp(65),
    borderColor: colors[1104],
    borderWidth: StyleSheet.hairlineWidth,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  titleBar: {
    width: px2dp(10),
    height: px2dp(40),
    backgroundColor: colors[1001],
    marginRight: px2dp(22),
  },
  titleText: {
    fontSize: f3,
  },
  itemView: {
    height: px2dp(80),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginLeft: px2dp(66),
    marginRight: px2dp(66),
  },
  itemLabel: {
    fontSize: f2,
    color: colors[1101],
  },
  insuranceItem: {
    height: px2dp(80),
    textAlignVertical: 'center',
    paddingLeft: px2dp(66),
  },
  makePlanViewk: {
    flexDirection: 'row',
    height: px2dp(120),
  },
  totalMoneyView: {
    width: '50%',
    borderColor: colors[1104],
    borderWidth: StyleSheet.hairlineWidth,
    backgroundColor: white,
    alignItems: 'center',
    justifyContent: 'center',
  },
  totalMoney: {
    color: colors[1001],
    fontSize: f2,
    fontWeight: 'bold',
  },
  totalText: {
    fontSize: f3,
    color: colors[1102],
  },
  importBtn: {
    fontSize: px2dp(26),
    color: colors[1001],
  },
  inputComponent: {
    width: px2dp(160),
    height: px2dp(36),
    padding: 0,
    paddingLeft: px2dp(10),
    borderColor: colors[1104],
    borderWidth: StyleSheet.hairlineWidth,
  },
  confirmBtn: {
    backgroundColor: colors[1001],
    height: px2dp(72),
    color: colors.white,
    textAlignVertical: 'center',
    textAlign: 'center',
  },
});

export {
  Header,
  InputWithBtn,
  Row,
  ExtendBox,
  Select,
  Title,
  Item,
  InsuranceItem,
  TotalView,
  ImportBtn,
  Input,
  RadioPicker,
  ChooseBtn,
  ConfirmBtn,
  Notes,
  Email,
};
